<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200">
      <h1 class="logo"></h1>

      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
      >
        <qf-sub-menu :sideMenu="$store.state.userMenu"></qf-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- header -->
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6"
            ><div class="grid-content left">
              <el-radio-group style="margin-bottom: 20px">
                <el-radio-button :label="false"
                  ><i
                    @click="isCollapse = !isCollapse"
                    :class="[
                      'iconfont',
                      isCollapse ? 'icon-fold-right' : 'icon-shouqi1',
                    ]"
                  ></i
                ></el-radio-button>
                <!-- <el-radio-button :label="true"
                  ><i @close="close" class="iconfont icon-shouqi1"></i
                ></el-radio-button> -->
              </el-radio-group>
            </div></el-col
          >

          <el-col :span="6"
            ><div class="grid-content center">WHY管理系统</div></el-col
          >

          <el-col :span="6">
            <div class="grid-content right">
              <el-avatar size="large" :src="userInfo.headimgurl"></el-avatar>

              <b
                >欢迎您:<span class="nickname">{{ userInfo.nickname }}</span></b
              >
              &nbsp;
              <b class="quit" @click="quit">退出</b>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <!-- main -->
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{name:bread.name}" v-for="bread in breadCrumb" :key="bread.name">{{bread.meta.name}}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  computed: {
    ...mapState(["userInfo","breadCrumb"]),
  },
  methods: {
    quit() {
      localStorage.removeItem("w-token");
      this.$router.push("/login");
    },
    // open() {
    //   collapes="!isCollapse";

    // },
    // close() {
    //   collapes="isCollapse"
    // },
  },
};
</script>

<style scoped lang="less">
.el-container {
  margin-bottom: 40px;
  height: 100%;
}
.el-header {
  min-height: 60px !important;
  background: linear-gradient(to left, #c1e2f9, #85aff4);
  color: #424242;
  text-align: center;
  line-height: 36px;
  .left {
    text-align: left;
    i {
      font-size: 25px;
      cursor: pointer;
    }
    /deep/ .el-radio-button__inner {
      border: none !important;
      background: none !important;
      color: #fff;
     
    }
  }
  .center {
    font-size: 24px;
    font-weight: bolder;
  }
  .el-avatar {
    vertical-align: middle;
    margin-right: 10px;
  }

  .quit {
    color: #f44444;
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
  }
  .nickname {
    color: rgb(225, 129, 84);
    margin-left: 5px;
  }
}

.el-aside {
  background: linear-gradient(to top, #c1e2f9, #85aff4);
  color: #333;
  text-align: center;
  .logo {
    min-height: 60px;
    background: url(http://chst.vip:8081/stu2/img/logo.be8bbddf.png) no-repeat
      center;
    background-size: 60%;
  }
}

.el-main {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  text-align: center;
}

/* header */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}

//侧边栏
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>